<template>
  <div class="manage-post">
    <div class="title">记录管理</div>
    <div class="main">
      <PostItem v-for="item in posts" :obj="item" @delete="getAllPosts"></PostItem>
      <el-empty v-if="posts.length == 0" description="no more post" />
    </div>
    <div class="pagination">
      <el-pagination
        v-model:current-page="pageInfo.page"
        background
        layout="prev, pager, next"
        :total="pageInfo.total"
        :page-size="6"
        @change="getAllPosts"
      />
    </div>
  </div>
</template>

<script setup>
import { getCurrentPosts } from '@/api/forum'
import PostItem from './components/PostItem.vue'
import { ref } from 'vue'
import { startLoading, stopLoading } from '@/utils/loading'

// 分页
const pageInfo = ref({
  page: 1,
  total: 0,
  totalPage: 0,
})

// 当前用户所有帖子
const posts = ref([])

const getAllPosts = async () => {
  startLoading()
  const { data } = (await getCurrentPosts(pageInfo.value.page)).data
  stopLoading()
  posts.value = data.data
  pageInfo.value = {
    page: +data.currentPage,
    total: +data.total,
    totalPage: +data.pages,
  }
}

getAllPosts()
</script>

<style scoped less="scss">
.manage-post {
  .title {
    font-size: 20px;
    margin: 10px 20px;
  }

  .main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;

    min-height: 400px;
  }

  .pagination {
    display: flex;
    justify-content: center;
    align-items: center;

    margin-top: 10px;
  }
}
</style>
